<template>
  <div class="bg-grey" id="logDetail">
    <van-cell-group>
      <van-field
        class="textarea-field"
        label-class="left-class"
        v-model="infos.content"
        rows="5"
        autosize
        disabled
        label="内容"
        type="textarea"
        :border="false"
      />
    </van-cell-group>
    <van-cell-group class="margin-t-10" v-if="infos.type == '2' && infos.attendance.length > 0">
      <van-field
        :border="false"
        disabled
      >
        <div slot="label" class="cell-left-class">共享人员 <span class="label-right">{{infos.attendance.length}}人</span></div>
        <span slot="button" class="more-btn" @click="checkAll">查看全部</span>
      </van-field>
      <div class="tag-class">
        <van-row gutter="12">
          <van-col span="4" v-for="(atten,j) in infos.attendance" :key="j" v-if="j <= 4">
            <template v-if="atten.pic == null">
              <img class="tag-img" src="../../assets/notification/head.png" @click="checkIdCard(atten.id)">
            </template>
            <template v-else>
              <img class="tag-img" :src="`${$common.filePath}${atten.pic}`" @click="checkIdCard(atten.id)">
            </template>
            <p class="title-text van-ellipsis">
              {{atten.name}}
            </p>
          </van-col>
          <van-col v-if="infos.attendance.length > 5">
            <img class="tag-img" src="../../assets/meeting/dot.png">
            <p class="title-text van-ellipsis">
              ......
            </p>
          </van-col>
        </van-row>
      </div>
    </van-cell-group>

    <!-- 所有参会人员 -->
    <van-popup v-model="showAll" position="bottom" :close-on-click-overlay="false" 
    :safe-area-inset-bottom="true" :close-on-popstate="true">
      <div class="full-container">
        <!-- <van-nav-bar title="共享人员" left-text="返回" left-arrow  @click-left="goBack"></van-nav-bar> -->
        <div class="alls">
          <p class="information">共{{infos.attendance.length}}人参会</p>
          <van-cell-group :border="false" v-for="(item,i) in infos.attendance" :key="i">
            <van-cell>
              <template slot="title">
                <div class="flex-base" @click="checkIdCard(item.id)">
                  <template v-if="item.pic == null">
                    <img class="tag-img" src="../../assets/notification/head.png">
                  </template>
                  <template v-else>
                    <img class="tag-img" :src="`${$common.filePath}${item.pic}`">
                  </template>
                  <span class="title-text mrgin-l-15">
                    {{item.name}}
                  </span>
                </div>
              </template>
              <template slot="default">
                <div class="right-value">
                  <!-- <a><img class="custom-class" src="../../assets/meeting/message.png"></a> -->
                  <template v-if="item.phone != null">
                    <img class="custom-class" src="../../assets/meeting/tel.png" @click="phoneCall(item.phone)">
                  </template>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script type="text/javascript">
  export default{
    data() {
      return {
        editId: "",//日志id
        infos:{
          type: "1",// 1是个人日志 2是工作日志
          content: "",
          attendance: [],
          uid: "",      //用来判断是否是本人的日志
        },
        showAll: false
      }
    },
    activated() {
      this.infos = {
        type: "1",// 1是个人日志 2是工作日志
        content: "",
        attendance: [],
      },
      this.editId = this.$route.query.editId

      setTimeout(_ => {
        this.$bridge.callHandler('navTitle', {title: '日志详情'})
        this.$bridge.callHandler('navBack')

        if (this.infos.uid == this.$store.state.userId) {
          this.$bridge.callHandler('navRight', {title: '编辑'})
        }else {
          this.$bridge.callHandler('navRight', {title: ''})
        }
        
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          this.$router.go(-1)
          responseCallback('go(-1)')
        })

        this.$bridge.registerHandler('navRightClicked',  (data, responseCallback)  => {
          this.$router.push({ name:'addJournal', query:{ editId:this.editId, status:'edit' }})
          responseCallback('edit')
        })
      },200)
      
      this.showDetail()
    },
    methods: {
      /**
       * 显示详情
       * @return {[type]} [description]
       */
      showDetail() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}attendance.php`,
          data: {
            do: 'bloga',
            id: this.editId,
          }
        }
        this.$axios(config).then(res => {
          this.infos.type = res.data.type
          this.infos.content = res.data.content
          this.infos.uid = res.data.uid
          this.infos.attendance = res.data.user

          this.$nextTick(_ => {
            setTimeout(_ => {
              this.$bridge.registerHandler('fullScreenLeftClick',(data, responseCallback) => {
                this.$bridge.callHandler('cancelFullScreen',{title:'日志详情'})
                this.showAll = false
                responseCallback('leftclick')
              })
            },500)
          })
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /** 
       * 查看所有人
       */
      checkAll(){
        this.$bridge.callHandler('openFullScreen',{left:'返 回',title:'共享人员'})
        this.showAll = true
      },
      /**
       * 出席人员返回
       * @return {[type]} [description]
       */
      goBack() {
        this.showAll = false
      },
      /**
       * 拨打电话
       * @return {[type]} [description]
       */
      phoneCall(phone) {
        this.$bridge.callHandler('makePhoneCall', { tel: phone })
      },
      /**
       * 用户名片
       * @param  {[type]} uid [description]
       * @return {[type]}     [description]
       */
      checkIdCard(uid) {
        console.log(uid)
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .margin-t-10 {
    margin-top: 10px;
  }
  .cell-left-class{
    color: #999999;
    max-width: 100px;
    max-height: 100px;
  }
  .title-text{
    margin-top: 0;
    text-align: center;
    font-size: 14px;
    color: #333333;
  }

  .alls{
    .information{
      color: #999999;
      font-size: 14px;
      padding: 0 15px;
    }
  }
  .flex-base{
    display: flex;
    align-items: center;
  }
  .right-value{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    a{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .custom-class{
    width: 24px;
    height: 24px;
    margin-right: 20px;
  }
  .padding-16{
    padding: 0 16px;
  }
  .margin-r-10{
    margin-right: 10px;
  }
   .tag-img{
    width: 45px;
    height: 45px;
  }
  .tag-text{
    font-size: 14px;
    color: #333333;
    margin: -23px 0 0 0;
  }
  .full-container{
    height: 100vh;
  }
  .alls{
    // padding-top: 46px;

    .information{
      color: #999999;
      font-size: 14px;
      padding: 10px 15px 0 15px;
    }
  }
  .flex-base{
    display: flex;
    align-items: center;
  }
  .right-value{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    a{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .label-right{
    font-size: 14px;
    color: #999999;
  }
  .more-btn{
    color: #2E79FF;
    font-size: 14px;
  }
  .tag-class{
    padding: 0 16px;
  }
  .van-tag{
    margin-right: 8px;
    margin-bottom: 8px;
  }
  .mrgin-l-15{
    margin-left: 15px;
  }
</style>
<style type="text/css" lang="less">
  #logDetail {
    .left-class {
      color: #999999;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .van-field__control:disabled {
      color: #333333;
      -webkit-text-fill-color: #333333;
    }
    .van-nav-bar {
      position: fixed;
      width: 100vw;

      .van-nav-bar__text {
        color: #333333;
      }
    }
  }
</style>